<template>
  <el-container class="parking-charge_index">
    <el-main>
      <el-card shadow="never" class="selectCard searchColumn">
        <el-form label-position="right" label-width="6rem">
          <el-row :gutter="40">
            <el-col :span="6">
              <el-form-item label="公司/个人：">
                <el-input v-model="params.leaseeName" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="负责人：">
                <el-input v-model="params.legalPersonName" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系电话：">
                <el-input v-model="params.leaseePhone" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <search-button :default-params="params" @refreshParams="refreshParams" @getList="getList1" />
            </el-col>
          </el-row>

        </el-form>
      </el-card>
      <el-card shadow="never" class="tableCard">
        <vxe-toolbar :custom="{icon: 'el-icon-s-operation'}" :refresh="{query: getList}" print>
          <template v-slot:buttons>
            <el-button type="primary" icon="el-icon-plus" @click="openDialog('', false)">新增</el-button>
          </template>
        </vxe-toolbar>
        <vxe-table
          ref="xTable"
          border
          resizable
          highlight-hover-row
          :loading="loading"
          :auto-resize="true"
          :data="list"
          width
          max-height="500"
          :print-config="{}"
        >
          <vxe-table-column type="seq" align="center" width="50" title=" " />
          <vxe-table-column width="220" field="leaseeName" title="公司/个人名称" />
          <vxe-table-column width="180" field="legalPersonName" title="负责人" />
          <vxe-table-column width="150" field="leaseePhone" title="联系电话" />
          <vxe-table-column width="200" field="businessLicenseNo" title="统一代码/身份证" />
          <vxe-table-column width="260" field="leaseeAddress" title="公司/个人地址" />
          <vxe-table-column width="100" field="typeName" title="性质" />
          <vxe-table-column min-width="200" field="description" title="描述" />
          <vxe-table-column title="操作" fixed="right" width="130" slots="default">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="openDialog(scope.row.id, true)">查看</el-button>
              <el-button type="text" size="mini" @click="openDialog(scope.row.id, false)">编辑</el-button>
              <el-button type="text" size="mini" @click="delInfo(scope.row.id)">删除</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager
          :current-page.sync="params.pageNum"
          :page-size.sync="params.pageSize"
          :total="total"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          @page-change="getList"
        />
      </el-card>
    </el-main>
    <el-dialog width="60%" title="商户主体维护" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
      <el-form ref="ruleForm" :model="formParams" :rules="rules" label-width="10rem">
        <el-tabs v-model="tabsName">
          <el-tab-pane label="基本信息" name="0">
            <el-row :gutter="40">
              <el-col :span="24">
                <el-form-item prop="leaseeName" label="公司/个人名称：">
                  <el-input v-model="formParams.leaseeName" :disabled="disabled" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item prop="leaseeAddress" label="联系地址：">
                  <el-input v-model="formParams.leaseeAddress" :disabled="disabled" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="businessLicenseNo" label="统一代码/身份证：">
                  <el-input v-model="formParams.businessLicenseNo" :disabled="disabled" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="leaseeType" label="性质：">
                  <el-select v-model="formParams.leaseeType" placeholder="请选择" :disabled="disabled">
                    <el-option label="个人" :value="2" />
                    <el-option label="企业" :value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="contacterName" label="联系人名称：">
                  <el-input v-model="formParams.contacterName" :disabled="disabled" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="leaseePhone" label="手机号码：">
                  <el-input v-model="formParams.leaseePhone" type="text" :disabled="disabled" maxlength="12" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="leaseeContactEmail" label="联系邮箱：">
                  <el-input v-model="formParams.leaseeContactEmail" type="text" :disabled="disabled" maxlength="12" />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item prop="contacterPhone" label="公司电话：">
                  <el-input v-model="formParams.contacterPhone" :disabled="disabled" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="描述：">
                  <el-input v-model="formParams.description" type="textarea" :disabled="disabled" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="公司注册信息" name="1">
            <el-col :span="12">
              <el-form-item prop="leaseeOrgCode" label="组织机构代码：">
                <el-input v-model="formParams.leaseeOrgCode" type="text" :disabled="disabled" maxlength="12" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="leaseeTaxCode" label="纳税人识别号：">
                <el-input v-model="formParams.leaseeTaxCode" type="text" :disabled="disabled" maxlength="12" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="unionBusinessLicense" label="是否三证合一：">
                <el-select v-model="formParams.unionBusinessLicense" placeholder="请选择" :disabled="disabled">
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="leaseeDepositBank" label="开户行：">
                <el-input v-model="formParams.leaseeDepositBank" type="text" :disabled="disabled" maxlength="12" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="leaseeDepositBankAccount" label="开户行账号：">
                <el-input v-model="formParams.leaseeDepositBankAccount" type="text" :disabled="disabled" maxlength="12" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item prop="legalPersonName" label="公司法人/负责人：">
                <el-input v-model="formParams.legalPersonName" :disabled="disabled" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="legalPersonIdCardNo" label="法人身份证号：">
                <el-input v-model="formParams.legalPersonIdCardNo" :disabled="disabled" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="legalPersonContactPhone" label="法人联系电话：">
                <el-input v-model="formParams.legalPersonContactPhone" :disabled="disabled" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="legalPersonContactAddress" label="法人联系地址：">
                <el-input v-model="formParams.legalPersonContactAddress" :disabled="disabled" />
              </el-form-item>
            </el-col>
          </el-tab-pane>
          <el-tab-pane label="附件信息" name="2">
            <el-col :span="24" class="flex-column">
              <el-form-item label="附件信息：" prop="coverImgs">
                <div>
                  <upload ref="fileUpload" :limit="10" :disabled="disabled" :file-list="uploadFileList" :name-show="false" @setKey="getUrl" />
                  <span>大小：10M</span>
                </div>
              </el-form-item>
            </el-col>
          </el-tab-pane>
        </el-tabs>

      </el-form>
      <div v-if="!disabled" slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickSure">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>
<script>
import upload from '@/components/upload'
import SearchButton from '@/components/SearchButton'
import { lesseePageList, lesseeSave, lesseeDetails, lesseeDel } from '@/api/tenement'
export default {
  components: {
    SearchButton,
    upload
  },
  data() {
    return {
      arrList: [],
      disabled: false,
      dialogFormVisible: false,
      loading: false,
      uploadFileList: [],
      total: 0,
      params: {
        pageNum: 1,
        pageSize: 20,
        leaseeName: '',
        brandName: '',
        legalPersonName: '',
        leaseePhone: '',
        businessLicenseNo: ''
      },
      list: [],
      formParams: {
        leaseeType: '1',
        unionBusinessLicense: '是'
      },
      rules: {
        leaseeName: [{ required: true, message: '请输入公司/个人', trigger: 'blur' }],
        businessLicenseNo: [{ required: true, message: '请输入信用证代码/身份证', trigger: 'blur' }],
        leaseeType: [{ required: true, message: '请输入性质', trigger: 'change' }],
        contacterName: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        leaseePhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        leaseeAddress: [{ required: true, message: '请输入公司/个人地址', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    refreshParams(params) {
      this.params = params
      this.getList()
    },
    getList1() {
      this.params.pageNum = 1
      this.getList()
    },
    // 列表
    getList() {
      lesseePageList(this.params).then(res => {
        this.list = res.records
        this.total = res.total
      })
    },
    // 删除
    delInfo(id) {
      this.$confirm('请确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        lesseeDel(id).then(res => {
          this.$message.success('删除成功')
          this.getList()
        })
      })
    },
    // 新增、查看
    openDialog(id, bool) {
      this.disabled = bool
      Object.keys(this.formParams).forEach((key) => {
        this.formParams[key] = undefined
      })
      this.dialogFormVisible = true
      this.getDetails(id)
    },
    getDetails(id) {
      if (id) {
        lesseeDetails(id).then(res => {
          this.formParams = res
          this.uploadFileList = []
          this.formParams.coverImgs.forEach(item => {
            this.uploadFileList.push({
              url: item
            })
          })
        })
      }
    },
    // 保存
    clickSure() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          lesseeSave(this.formParams).then(res => {
            this.$message.success('保存成功')
            this.dialogFormVisible = false
            this.getList()
          })
        }
      })
    }
  }
}
</script>
<style lang="scss">
  .flex-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .el-form-item {
      margin-bottom: 10px !important;
    }
  }
</style>
